<template>
    <div class="home_content">
        <mt-swipe    >
        <mt-swipe-item v-for="(item,index) in  lunbotu" :key="index">
            <img :src="item.url" alt="">
        </mt-swipe-item>
        </mt-swipe>
            <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../static/imgage/meun1.png" alt="">
		                    <div class="mui-media-body">China大片</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../static/imgage/meun2.png" alt="">
		                    <div class="mui-media-body">Chinese大片</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../static/imgage/meun3.png" alt="">
		                    <div class="mui-media-body">韩国大片</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../static/imgage/meun4.png" alt="">
		                    <div class="mui-media-body">日本大片</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../../static/imgage/meun5.png" alt="">
		                    <div class="mui-media-body">亚洲大片</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../../static/imgage/meun6.png" alt="">
		                    <div class="mui-media-body">美国大片</div></a></li>

		        </ul>
		</div>
    </div>

</template>

<script>

export default {
  data () {
    return {
      lunbotu: []// 存放轮播图
    }
  },
  created () {
    this.getLubotu()
  },
  methods: {

    getLubotu () {
 
//https://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1
      this.get('/api/data/福利/10/2')
        .then((res) => {
          console.log(res)
          // if (res.data.error === false) {
          //   this.lunbotu = res.data.results
          // }
        })
        .catch((err) => {
          this.$toast('获取数据失败...!!')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .mint-swipe{
      height: 200px;
      .mint-swipe-item{
          &:nth-child(1){
            background-color: red
          }
           &:nth-child(2){
            background-color: blue
          } &:nth-child(3){
            background-color: darkolivegreen
          }
      }
      img{
          width: 100%;
          height: 100%;
      }
  }

.mui-content{
    height: 100%;
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        height: 33.33333333%;
        width: 33.33333%;
        border:none;
    }
    img{
        width: 55px;
        height: 55px;
    }
    .mui-media-body{
        font-size: 13px;
    }
    .mui-grid-view.mui-grid-9{
        background-color:white;
        border:0px;
    }

}

.app-anchor{
top: calc(50% - 42px);
}
</style>
